<!DOCTYPE html>
<html>
<head>
  <link href="/basic.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="/jquery.min.js"></script>
  <script type="text/javascript" src="/webfont-fontwatchrunner.js"></script>
  <style type="text/css">
    #results {
      font-family: arial, sans-serif;
      font-size: 16px;
    }
    .test-case {
      font-size: 300px;
    }
  </style>
  <script type="text/javascript">
    var styles = '<style type="text/css">';
    styles += '.default-fonts-a {font-family: ' + webfont.FontWatchRunner.DEFAULT_FONTS_A + ';}';
    styles += '.default-fonts-b {font-family: ' + webfont.FontWatchRunner.DEFAULT_FONTS_B + ';}';
    styles += '</style>';
    document.write(styles);
  </script>
</head>
<body>
  <p id="results">Calculating...</p>
  <p>
    The goal of this page is to verify that the two default font stacks in
    FontWatchRunner have different widths on a given platform when rendering the
    default test string. The pairs of headings below should render in different
    fonts and the results above should indicate that they all have different
    widths.
  </p>
  <hr>
  <div id="test-cases"></div>
  <script type="text/javascript">
    // Calculate all the different combinations of styles to test
    var styles = {
      'font-weight': [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
      'font-style': ['normal', 'italic'],
      'text-rendering': [null, 'optimizeLegibility']
    };
    function calculateStyleCombos(props, styles) {
      if (props.length <= 0) {
        return [{}]
      }
      var remainingProps = $.extend(true, [], props);
      var prop = remainingProps.pop();
      var remainingCombos = calculateStyleCombos(remainingProps, styles);
      var combos = [];
      for (var i = 0; i < remainingCombos.length; i++) {
        for (var j = 0; j < styles[prop].length; j++) {
          var combo = {};
          if (styles[prop][j] !== null) {
            combo[prop] = styles[prop][j];
          }
          combos.push($.extend(combo, remainingCombos[i]));
        }
      }
      return combos;
    }
    var styleCombos = calculateStyleCombos(['font-weight', 'font-style', 'text-rendering'], styles);

    // Create test cases with default test strings for each style combo
    var testCases = $('#test-cases');
    for (var i = 0; i < styleCombos.length; i++) {
      var test = $('<div class="test-case"></div>').css(styleCombos[i]);
      test.append($('<span class="default-fonts-a"></span>').text(webfont.FontWatchRunner.DEFAULT_TEST_STRING));
      test.append($('<span class="default-fonts-b"></span>').text(webfont.FontWatchRunner.DEFAULT_TEST_STRING));
      testCases.append(test);
    }

    // Calculate the width of the spans after timeout
    setTimeout(function() {
      var comparisons = $('<span></span>');
      var allPassed = true;
      $('.test-case').each(function() {
        var a = $(this).find('span').first().width();
        var b = $(this).find('span').last().width();
        comparisons.append($('<span></span>').css('color', a != b ? 'green' : 'red').text(a - b)).append(' ');
        allPassed = allPassed && a != b;
      });
      $('#results').text(allPassed ? 'SUCCESS | ' : 'FAIL | ').append(comparisons);
    }, 500);
  </script>
</body>
</html>
